<template>
  <div class="news">
    <div class="banner">
      <img :src='newsImg'>
      <div class="title">
        <div class="title_container">
          <h1>新闻资讯</h1>
        </div>
      </div>
    </div>
    <div class="news_main">
      <div class="container">
        <el-row :gutter="10">
          <el-col :md="18">
            <router-view/>
            
          </el-col>
          <el-col :md="6">
            <div class="news_bar">
              <div class="recommend">
                <h3>为你推荐</h3>
                <ul>
                  <li v-for='item in 5'>
                    <router-link to='/page/news/all'>低碳建筑首选天然石材 环保健康受欢迎</router-link>
                  </li>
                </ul>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      newsImg: require("../assets/news.jpg")
    }
  }
}

</script>
<style lang='scss'>
.news {
  width: 100%;
  @include bannerStyle;
  .news_main {
    background-color: #F2F2F2;
    padding: 30px 0px;
    .container {
      @include maxWidthMargin0;
      .news_bar {
        background: #ffffff;
        margin-left: 30px;
        padding: 20px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
        .recommend {
          margin: 20px 0px;
          padding: 20px 0px;
          border-top: 1px solid #f0f2f5;
          border-bottom: 1px solid #f0f2f5;
          h3 {
            font-size: 18px;
            color: #37474f;
          }
          ul {
            margin-top: 10px;
            li {
              position: relative;
              display: block;
              padding: 10px 15px;
              margin-bottom: -1px;
              background-color: #fff;
              border: 1px solid #e4eaec;
              &:first-child {
                border-top-left-radius: 3px;
                border-top-right-radius: 3px;
              }
              &:last-child {
                border-bottom-right-radius: 3px;
                border-bottom-left-radius: 3px;
              }
              a {
                color: #2a333c;
                font-size: 15px;
              }
            }
          }
        }
      }
    }
  }
}

</style>
